<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>AutoComplete</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-05-24 -->
		<link href="../../resources/kendo/styles/kendo.default.min.css" rel="stylesheet" />
		 <link href="../../resources/kendo/styles/kendo.common.min.css" rel="stylesheet" />
		 <script src="../../resources/kendo/js/jquery.min.js"></script>
		<script src="../../resources/kendo/js/kendo.all.min.js"></script>
		
	</head>
	<body>
		 <div id="example" class="k-content">

			<div id="shipping">
                <label for="countries" class="info">Choose shipping countries:</label>

                <input id="countries" />

                <div class="hint">Start typing the name of an European country</div>

			</div>

            <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
                            "Andorra",
                            "Armenia",
                            "Austria",
                            "Azerbaijan",
                            "Belarus",
                            "Belgium",
                            "Bosnia & Herzegovina",
                            "Bulgaria",
                            "Croatia",
                            "Cyprus",
                            "Czech Republic",
                            "Denmark",
                            "Estonia",
                            "Finland",
                            "France",
                            "Georgia",
                            "Germany",
                            "Greece",
                            "Hungary",
                            "Iceland",
                            "Ireland",
                            "Italy",
                            "Kosovo",
                            "Latvia",
                            "Liechtenstein",
                            "Lithuania",
                            "Luxembourg",
                            "Macedonia",
                            "Malta",
                            "Moldova",
                            "Monaco",
                            "Montenegro",
                            "Netherlands",
                            "Norway",
                            "Poland",
                            "Portugal",
                            "Romania",
                            "Russia",
                            "San Marino",
                            "Serbia",
                            "Slovakia",
                            "Slovenia",
                            "Spain",
                            "Sweden",
                            "Switzerland",
                            "Turkey",
                            "Ukraine",
                            "United Kingdom",
                            "Vatican City",
                            "中国"
                        ];

                    //create AutoComplete UI component
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script>
            <style scoped>
              
            </style>
        </div>

	</body>
</html>

